<template>
    <div class="person">
        子组件
        <h3>当前求和为{{ Sum }}</h3>
        <h3>玩具：{{ toy }}</h3>
        <hr>
        <button @click="Add">添加数组元素</button>
        <h3>数组</h3>
        <ul>
            <li v-for="(item,index) in TalkArr" :key="index">{{ item.content }}</li>
        </ul>
        <button @click="SendToy(toy)">向父亲传递</button>
        <h3>电脑：{{ computer }}</h3>
        <h3 v-show="car">车：{{ car }}</h3>
        <button @click="emitter.emit('Getcomputer',computer)">传电脑给父</button>
        <button @click="Sendtoy">把玩具给父</button>
        <h3>用户名：{{ test }}</h3>
        <h3>年龄{{ age }}</h3>
        <h3>钱：{{ money }}</h3>
        <button @click="havemoney($parent)">父亲给钱</button>
        <button @click="changemoney">赚钱</button>
        <button @click="changecar($parent)">修改父亲的车</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import axios from 'axios';
import {ref,onMounted, inject, provide} from 'vue';
import emitter from '@/tools/emitter';
    defineProps(['Sum','TalkArr','Add','SendToy','test' ]);
    const emit=defineEmits(['Gettoy']);
    let toy=ref("飞机");
    let computer=ref("联想");
    let car=ref("");
    let age=ref(0);
    emitter.on("Getcar",(val:any)=>{
        car.value=val;
    })
    function Sendtoy(){
        emit('Gettoy',toy);
    }
    function havemoney(parent:any){
        parent.money-=1;
    }
    function changecar(parent:any){
        parent.car='宝马';
    }
    let {money,changemoney}=inject('usemoney',{money: 0,changemoney: ()=>{}});
    defineExpose({toy,computer});
</script>
<style scoped> 
    .person{
        background-color: skyblue;
        border-radius: 10px;
        border: 1px solid black;
        box-shadow: 0 0 10px;
    }
</style>